@import "/src/assets/variables";

.panel {
  overflow: hidden;
  height: 100%;
}

.head {
  height: @toolHeight + 4px;
  color: @fontColor;
  background-color: @splitBgColor;
  align-items: center;
  box-sizing: border-box;
  border-bottom: 1px solid @borderColor;
}

//noinspection DuplicatedCode
.center {
  overflow: auto;
  height: calc(100% - @toolHeight);
  font-size: 14px;
  flex-shrink: 0;
}

.loading {
  height: 256px;
}

.fileTree {
  font-size: 14px;
}

.folderIcon {
  padding-right: 4px;

  svg {
    fill: #87939A;
  }
}

.viewSelect {
  height: 100% !important;
  padding: 0 4px;
  border: none;
  color: @fontColor;
  background-color: @splitBgColor;

  option {
    background-color: @paneBgColor;
  }
}

//noinspection DuplicatedCode
.icon {
  height: @toolHeight;
  margin: 1px;
  padding: 4px 4px;
  border-radius: 2px;
  font-size: 16px;
  color: @iconColor;
  user-select: none;

  &:hover {
    background-color: @toolItemIconHoverBgColor;
  }

  &:active {
    background-color: @toolItemIconActiveBgColor;
  }

  svg, svg g, svg g path, svg g rect {
    fill: @iconColor;
  }
}

.iconDisable {
  color: @fontDisableColor !important;
  cursor: default !important;

  &:hover {
    background-color: unset !important;
  }

  svg, svg g, svg g path, svg g rect {
    fill: @fontDisableColor !important;
  }
}

.menu {
  box-sizing: border-box;
}

.menuIcon {
  padding: 2px 0;
  font-size: 16px;

  svg {
    color: @iconColor;
  }
}

.emptyDiv {
  height: 24px;
}

.dialog {
  font-size: 12px;

  :global {
    .bp3-form-group.bp3-inline {
      margin-left: 16px;
      margin-right: 16px;

      .bp3-form-content {
        flex-grow: 1;
        flex-shrink: 1;
      }
    }
  }
}

.addHttpApiDialog {
  :global {
    .bp3-form-content {
      display: flex;
      flex-direction: row;
    }

    select {
      display: inline-block;
      flex-shrink: 0;
      flex-grow: 0;
      width: 80px;
      height: 24px;
      background-color: #3C3F41;
      border-color: #646464;
      color: @fontColor;

      &:focus {
        box-shadow: 0 0 0 1px #4083c9, 0 0 0 1px #4083c9, 0 0 0 1px rgb(64 131 201 / 30%), inset 0 0 0 1px rgb(64 131 201 / 30%), inset 0 1px 1px rgb(64 131 201 / 40%);
      }
    }

    .bp3-input-group {
      display: inline-block;
      flex-shrink: 1;
      flex-grow: 1;
    }
  }
}

.renameDialog {
  :global {
    .bp3-label {
      width: 50px;
    }
  }
}
